<!-- 功能：系统工具 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2023年08月22日 22:59:31 -->
<template>
  <div class="y-xitonggongju">
    <a-card>
      <template #title><span class="y-xitonggongju-title">系统配置</span></template>
      <a-tooltip title="时间和日期配置选项让您可以对内部系统时钟进行配置，更新和维护。在该选项中您可以设置您所在的时区和NTP（网络时间协议）服务器，也可以手动设置日期和时间。修改时间后您需要重新登录系统！" color="#87d068">
        <a-card hoverable class="y-xitonggongju-card" @click="openSheZhiXiTongShiJianModal">
          <!-- 弹窗 - 设置系统时间 -->
          <sheZhiXiTongShiJianModal v-model:visible="visibleSheZhiXiTongShiJianModal"></sheZhiXiTongShiJianModal>
          <a-image :width="64" :src="timezone" :preview="false" />
          <p class="y-xitonggongju-card-title">设置系统时间</p>
        </a-card>
      </a-tooltip>
      <a-tooltip title="更改登录口令" color="#87d068">
        <a-card hoverable class="y-xitonggongju-card" @click="openGengGaiDengLuKouLingModal">
          <!-- 弹窗 - 更改登录口令 -->
          <gengGaiDengLuKouLingModal v-model:visible="visibleGengGaiDengLuKouLingModal" v-if="visibleGengGaiDengLuKouLingModal"></gengGaiDengLuKouLingModal>
          <a-image :width="64" :src="security" :preview="false" />
          <p class="y-xitonggongju-card-title">更改登录口令</p>
        </a-card>
      </a-tooltip>
      <a-tooltip title="导入导出配置" color="#87d068">
        <a-card hoverable class="y-xitonggongju-card" @click="openDaoRuDaoChuPeiZhiModal">
          <!-- 弹窗 - 导入导出配置 -->
          <daoRuDaoChuPeiZhiModal v-model:visible="visibleDaoRuDaoChuPeiZhiModal" v-if="visibleDaoRuDaoChuPeiZhiModal"></daoRuDaoChuPeiZhiModal>
          <a-image :width="64" :src="imorexport" :preview="false" />
          <p class="y-xitonggongju-card-title">导入导出配置</p>
        </a-card>
      </a-tooltip>
      <a-tooltip title="恢复出厂设置将所有的配置信息删除，包括RAID、多卷等信息，请慎重操作！" color="#87d068">
        <a-card hoverable class="y-xitonggongju-card" @click="huiFuChuChangSheZhi">
          <a-image :width="64" :src="restore" :preview="false" />
          <p class="y-xitonggongju-card-title">恢复出厂设置</p>
        </a-card>
      </a-tooltip>
      <a-tooltip title="设备重命名" color="#87d068">
        <a-card hoverable class="y-xitonggongju-card" @click="openSheBeiChongMingMingModal">
          <!-- 弹窗 - 设备重命名 -->
          <sheBeiChongMingMingModal v-model:visible="visibleSheBeiChongMingMingModal"></sheBeiChongMingMingModal>
          <a-image :width="64" :src="Renamecomputer" :preview="false" />
          <p class="y-xitonggongju-card-title">设备重命名</p>
        </a-card>
      </a-tooltip>
      <a-tooltip title="修改 RAID 最小同步速率" color="#87d068">
        <a-card hoverable class="y-xitonggongju-card" @click="openTongBuSuLvSheZhiModal">
          <!-- 弹窗 - 同步速率设置 -->
          <tongBuSuLvSheZhiModal v-model:visible="visibleTongBuSuLvSheZhiModal"></tongBuSuLvSheZhiModal>
          <a-image :width="64" :src="bigcopy" :preview="false" />
          <p class="y-xitonggongju-card-title">同步速率设置</p>
        </a-card>
      </a-tooltip>
      <a-tooltip title="IO优化" color="#87d068">
        <a-card hoverable class="y-xitonggongju-card" @click="openIoYouHuaModal">
          <!-- 弹窗 - IO优化 -->
          <ioYouHuaModal v-model:visible="visibleIoYouHuaModal"></ioYouHuaModal>
          <a-image :width="64" :src="ipsec" :preview="false" />
          <p class="y-xitonggongju-card-title">IO优化</p>
        </a-card>
      </a-tooltip>
    </a-card>

    <a-card>
      <template #title><span class="y-xitonggongju-title">系统控制</span></template>
      <a-tooltip title="按该按钮将立即重启系统.当前所有注册用户将被断掉,所有服务将被重启！" color="#87d068">
        <a-card hoverable class="y-xitonggongju-card" @click="openChongXinQiDongXiTongModal">
          <!-- 弹窗 - 重新启动系统 -->
          <chongXinQiDongXiTongModal v-model:visible="visibleChongXinQiDongXiTongModal"></chongXinQiDongXiTongModal>
          <a-image :width="64" :src="restart" :preview="false" />
          <p class="y-xitonggongju-card-title">重新启动系统</p>
        </a-card>
      </a-tooltip>
      <a-tooltip title="按该按钮将立即关闭系统.当前所有注册用户将被断掉,所有服务将被中止,电源被关掉！" color="#87d068">
        <a-card hoverable class="y-xitonggongju-card" @click="openGuanBiXiTongModal">
          <!-- 弹窗 -  关闭系统 -->
          <guanBiXiTongModal v-model:visible="visibleGuanBiXiTongModal"></guanBiXiTongModal>
          <a-image :width="64" :src="shutdown" :preview="false" />
          <p class="y-xitonggongju-card-title">关闭系统</p>
        </a-card>
      </a-tooltip>
      <a-tooltip title="定时关机" color="#87d068">
        <a-card hoverable class="y-xitonggongju-card" @click="openDingShiGuanJiModal">
          <!-- 弹窗 -  定时关机 -->
          <dingShiGuanJiModal v-model:visible="visibleDingShiGuanJiModal"></dingShiGuanJiModal>
          <a-image :width="64" :src="timeoff" :preview="false" />
          <p class="y-xitonggongju-card-title">定时关机</p>
        </a-card>
      </a-tooltip>
      <a-tooltip title="升级操作有可能会造成数据丢失，操作前请将关键数据备份！" color="#87d068">
        <a-card hoverable class="y-xitonggongju-card" @click="openXiTongShengJiModal">
          <!-- 弹窗 -  系统升级 -->
          <xiTongShengJiModal v-model:visible="visibleXiTongShengJiModal"></xiTongShengJiModal>
          <a-image :width="64" :src="update" :preview="false" />
          <p class="y-xitonggongju-card-title">系统升级</p>
        </a-card>
      </a-tooltip>
      <a-tooltip title="磁盘节能模式" color="#87d068">
        <a-card hoverable class="y-xitonggongju-card" @click="openCiPanJieNengMoShiModal">
          <!-- 弹窗 -  磁盘节能模式 -->
          <ciPanJieNengMoShiModal v-model:visible="visibleCiPanJieNengMoShiModal"></ciPanJieNengMoShiModal>
          <a-image :width="64" :src="diskstandby" :preview="false" />
          <p class="y-xitonggongju-card-title">磁盘节能模式</p>
        </a-card>
      </a-tooltip>
      <a-tooltip title="授权密钥" color="#87d068">
        <a-card hoverable class="y-xitonggongju-card" @click="shouQuanMiYao">
          <a-image :width="64" :src="licenseManager" :preview="false" />
          <p class="y-xitonggongju-card-title">授权密钥</p>
        </a-card>
      </a-tooltip>
      <a-tooltip title="外接UPS" color="#87d068">
        <a-card hoverable class="y-xitonggongju-card" @click="openWaiJieUpsModal">
          <!-- 弹窗 -  外接UPS -->
          <waiJieUpsModal v-model:visible="visibleWaiJieUpsModal"></waiJieUpsModal>
          <a-image :width="64" :src="ups" :preview="false" />
          <p class="y-xitonggongju-card-title">外接UPS</p>
        </a-card>
      </a-tooltip>
    </a-card>

    <a-card>
      <template #title><span class="y-xitonggongju-title">测试工具</span></template>
      <a-tooltip title="PING测试" color="#87d068">
        <a-card hoverable class="y-xitonggongju-card" @click="openPingCeShiModal">
          <!-- 弹窗 -  PING测试 -->
          <pingCeShiModal v-model:visible="visiblePingCeShiModal"></pingCeShiModal>
          <a-image :width="64" :src="ping" :preview="false" />
          <p class="y-xitonggongju-card-title">PING测试</p>
        </a-card>
      </a-tooltip>
      <a-tooltip title="磁盘工具" color="#87d068">
        <a-card hoverable class="y-xitonggongju-card" @click="openCiPanJianCeModal">
          <!-- 弹窗 -  磁盘检测 -->
          <ciPanJianCeModal v-model:visible="visibleCiPanJianCeModal"></ciPanJianCeModal>
          <a-image :width="64" :src="disk" :preview="false" />
          <p class="y-xitonggongju-card-title">磁盘检测</p>
        </a-card>
      </a-tooltip>
    </a-card>

  </div>
</template>

<script setup>
const router = useRouter()
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue'
import timezone from '@/assets/images/xiTongGongJu/timezone.png'
import security from '@/assets/images/xiTongGongJu/security.png'
import imorexport from '@/assets/images/xiTongGongJu/imorexport.png'
import restore from '@/assets/images/xiTongGongJu/restore.png'
import Renamecomputer from '@/assets/images/xiTongGongJu/Renamecomputer.png'
import bigcopy from '@/assets/images/xiTongGongJu/bigcopy.png'
import ipsec from '@/assets/images/xiTongGongJu/ipsec.png'
import restart from '@/assets/images/xiTongGongJu/restart.png'
import shutdown from '@/assets/images/xiTongGongJu/shutdown.png'
import timeoff from '@/assets/images/xiTongGongJu/timeoff.png'
import update from '@/assets/images/xiTongGongJu/update.png'
import diskstandby from '@/assets/images/xiTongGongJu/diskstandby.png'
import licenseManager from '@/assets/images/xiTongGongJu/license-manager.png'
import ups from '@/assets/images/xiTongGongJu/ups.png'
import ping from '@/assets/images/xiTongGongJu/ping.png'
import disk from '@/assets/images/xiTongGongJu/disk.png'

import sheZhiXiTongShiJianModal from './modal/sheZhiXiTongShiJianModal.vue'
import gengGaiDengLuKouLingModal from './modal/gengGaiDengLuKouLingModal.vue'
import daoRuDaoChuPeiZhiModal from './modal/daoRuDaoChuPeiZhiModal.vue'
import sheBeiChongMingMingModal from './modal/sheBeiChongMingMingModal.vue'
import tongBuSuLvSheZhiModal from './modal/tongBuSuLvSheZhiModal.vue'
import ioYouHuaModal from './modal/ioYouHuaModal.vue'
import chongXinQiDongXiTongModal from './modal/chongXinQiDongXiTongModal.vue'
import guanBiXiTongModal from './modal/guanBiXiTongModal.vue'
import dingShiGuanJiModal from './modal/dingShiGuanJiModal.vue'
import xiTongShengJiModal from './modal/xiTongShengJiModal.vue'
import ciPanJieNengMoShiModal from './modal/ciPanJieNengMoShiModal.vue'
import waiJieUpsModal from './modal/waiJieUpsModal.vue'
import pingCeShiModal from './modal/pingCeShiModal.vue'
import ciPanJianCeModal from './modal/ciPanJianCeModal.vue'

const visibleSheZhiXiTongShiJianModal = ref(false)

const openSheZhiXiTongShiJianModal = () => {
  visibleSheZhiXiTongShiJianModal.value = true
}

const visibleGengGaiDengLuKouLingModal = ref(false)

const openGengGaiDengLuKouLingModal = () => {
  visibleGengGaiDengLuKouLingModal.value = true
}

const visibleDaoRuDaoChuPeiZhiModal = ref(false)

const openDaoRuDaoChuPeiZhiModal = () => {
  visibleDaoRuDaoChuPeiZhiModal.value = true
}

const huiFuChuChangSheZhi = () => {
  Modal.confirm({
    title: '确认操作',
    icon: h(ExclamationCircleOutlined),
    content: '警告: 您确定您要将系统恢复到出厂时状态？！该操作可能造成您的数据丢失，操作前请先备份！?',
    okText: '确定',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      console.log('OK')
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}

const visibleSheBeiChongMingMingModal = ref(false)

const openSheBeiChongMingMingModal = () => {
  visibleSheBeiChongMingMingModal.value = true
}
const visibleTongBuSuLvSheZhiModal = ref(false)

const openTongBuSuLvSheZhiModal = () => {
  visibleTongBuSuLvSheZhiModal.value = true
}
const visibleIoYouHuaModal = ref(false)

const openIoYouHuaModal = () => {
  visibleIoYouHuaModal.value = true
}

const visibleChongXinQiDongXiTongModal = ref(false)

const openChongXinQiDongXiTongModal = () => {
  visibleChongXinQiDongXiTongModal.value = true
}
const visibleGuanBiXiTongModal = ref(false)

const openGuanBiXiTongModal = () => {
  visibleGuanBiXiTongModal.value = true
}

const visibleDingShiGuanJiModal = ref(false)

const openDingShiGuanJiModal = () => {
  visibleDingShiGuanJiModal.value = true
}

const visibleXiTongShengJiModal = ref(false)

const openXiTongShengJiModal = () => {
  visibleXiTongShengJiModal.value = true
}
const visibleCiPanJieNengMoShiModal = ref(false)

const openCiPanJieNengMoShiModal = () => {
  visibleCiPanJieNengMoShiModal.value = true
}

const visibleWaiJieUpsModal = ref(false)

const openWaiJieUpsModal = () => {
  visibleWaiJieUpsModal.value = true
}

const visiblePingCeShiModal = ref(false)

const openPingCeShiModal = () => {
  visiblePingCeShiModal.value = true
}
const visibleCiPanJianCeModal = ref(false)

const openCiPanJianCeModal = () => {
  visibleCiPanJianCeModal.value = true
}

const shouQuanMiYao = () => {
  router.push('/shouQuanMiYao')
}
</script>

<style scoped lang='scss'>
.y-xitonggongju {
  .y-xitonggongju-title {
    color: #333;
    font-weight: bold;
    font-size: 16px;
  }
  .y-xitonggongju-card {
    display: inline-block;
    margin: 4px;
    width: 120px;
    height: 120px;
    text-align: center;
    .y-xitonggongju-card-title {
      font-size: 14px;
      text-align: center;
      color: #2e6e9e !important;
    }
  }
}
</style>